<template>

  <div style="width: 99%">
    <!--    <div style="margin-bottom: 10px">-->
    <!--      <el-breadcrumb separator="/">-->
    <!--        <el-breadcrumb-item>系统管理</el-breadcrumb-item>-->
    <!--        <el-breadcrumb-item>菜单管理</el-breadcrumb-item>-->
    <!--      </el-breadcrumb>-->
    <!--    </div>-->

    <div style="margin-top: 10px">
      <div class="filter-group">
        <span>关键词</span>
        <el-input  placeholder="请输入关键词" v-model="queryObj.name" style="width: 200px;" clearable></el-input>
        <span>状态</span>
        <el-select  placeholder="状态筛选" clearable style="width: 120px;">
          <el-option label="启用" value="active"></el-option>
          <el-option label="禁用" value="inactive"></el-option>
        </el-select>

        <span>创建时间</span>
        <el-date-picker
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 300px;"
        >
        </el-date-picker>

        <el-button type="primary"  @click="_page">查询</el-button>
        <el-button  @click="">重置</el-button>

        <el-button type="primary" @click="_add">添加</el-button>

      </div>
    </div>
    <div >
      <EleTable ref="eleTableRef"
                url="/api/base/sys_resource/page_vo"
                :columnName="columnName"
                :queryObj="queryObj"
                :optList="optList"
                @opt-click="_opt"
      >

      </EleTable>
    </div>

    <EleDetail ref="sysMenuEleDetailRef" :formList="columnName" :formObj="formObj" title="菜单详情"  @on-result-change="_page"></EleDetail>
    <SysMenuEdit ref="sysMenuEditRef"   @on-result-change="_page"></SysMenuEdit>
  </div>

</template>

<script>


import  SysMenuEdit from './SysMenuEdit'
import  EleTable from '../../../common/EleTable'
import  EleDetail from '../../../common/EleDetail'
export default {
  components:{
    SysMenuEdit,
    EleDetail,
    EleTable
  },
  created(){
  },
  mounted(){
  },
  name: "Home",
  data(){
    return {
      queryObj: {},//查询参数
      formObj:{},
      columnName:[
        {prop:"name",label:"菜单名称",width:"120",fixed:true},
        {prop:"parentName",label:"上级菜单",width:"120",fixed:true},
        {prop:"code",label:"编码",width:"120"},
        {prop:"url",label:"URL",width:"120"},
        {prop:"pic",label:"图标编码",width:"120"},
        {prop:"orderBy",label:"顺序",width:"120"},
        {prop:"remark",label:"备注",width:"120"},
      ],
      optList:[
        {name:"查看",key:'detail'},
        {name:"编辑",key:'edit'},
      ]
    }
  },
  methods:{

    _add(){
      this.$refs.sysMenuEditRef._open();
    },

    _opt(data,key){
      switch (key){
        case 'edit':
          alert('编辑');
          break;
        case 'detail':
          this.$http.get('/api/base/sys_resource/'+data.id).then(res=>{
            this.formObj=res.data.data;
            this.$refs.sysMenuEleDetailRef._open();
          }).catch(err=>{

          });
          break;
      }
    },
    _page(){
      this.$refs.eleTableRef._page();
    },

  },
}
</script>

<style scoped>




</style>
